<template>
  <div class="baoxiaoall">
    <top></top>
    <div style="background: #fff;">
      <div style="padding: 20px;">
        <div style="font-size: 16px;margin-bottom: 20px;color: #666;" ><span @click="$router.back()" style=" cursor: pointer;color: #409EFF;">分销商数据</span>  /  {{$route.query.merchant_name}}店铺销售商品构成</div>
        <div class="flex">
          <el-form ref="all" :model="all" inline label-width="80px" @submit.native.prevent>
            <!-- <el-form-item label="时间周期">
              <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期"></el-date-picker>
            </el-form-item> -->
            <el-button type="danger" @click="daochu">导出</el-button>
          </el-form>
        </div>
      </div>
      <div style="padding: 20px;">
        <el-table :data="list" border style="width: 100%">
          <!-- <el-table-column prop='source' label="店铺名称"></el-table-column> -->

          <el-table-column prop='title' label="商品名"></el-table-column>
          <el-table-column prop='fetch_code' label="商品编码"></el-table-column>
          <el-table-column prop='orders_amount' label="订单数量"></el-table-column>
          <el-table-column prop='submit_amount' label="开卡中/已领取"> </el-table-column>
          <!--          <el-table-column prop='address_mobile' label="开卡失败"> </el-table-column> -->
          <el-table-column prop='refund_amount' label="退款成功量"> </el-table-column>
          <el-table-column prop='deliver_amount' label="发货数量"> </el-table-column>
          <el-table-column prop='address_mobile' label="发货率">
            <template slot-scope="scope">
              <span v-if="scope.row.orders_amount != 0">
                {{scope.row.deliver_amount/scope.row.orders_amount | tofix}}
              </span>
              <span v-if="scope.row.orders_amount == 0">0</span>
            </template>
          </el-table-column>
          <el-table-column prop='active_amount' label="激活数量"> </el-table-column>

          <el-table-column label="激活率（发货）">
            <template slot-scope="scope">
              <span v-if="scope.row.deliver_amount != 0">
                {{scope.row.active_amount/scope.row.deliver_amount | tofix}}
              </span>
              <span v-if="scope.row.deliver_amount == 0">0</span>
            </template>
          </el-table-column>
          <el-table-column label="激活率（订单）">
            <template slot-scope="scope">
              <span v-if="scope.row.orders_amount != 0">
                {{scope.row.active_amount/scope.row.orders_amount | tofix}}
              </span>
              <span v-if="scope.row.orders_amount == 0">0</span>

            </template>
          </el-table-column>
          <!-- <el-table-column prop='address_mobile' label="实际交易额"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="推广费用"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="其他费用"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="发货成本"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="激活成本"> 暂时没有</el-table-column>
          <el-table-column prop='address_mobile' label="预估佣金"> 暂时没有</el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="daochu(scope.row)">下载订单明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog title="新建销售渠道" :visible.sync="log" width="600px" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form ref="all" :model="all" label-width="80px" @submit.native.prevent>

        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addgo">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import top from "./components/top.vue";
  export default {
    components: {
      top
    },
    name: "apilist",
    data() {
      return {
        all: {
          start: "", //		是	string	时间
          end: "", //		是	string	时间
          channel_id: "", //	2	是	string	渠道id
          source: this.$route.query.merchant_name, //	pdd	是	string	来源
          sku: "", //		是	string	商品编码
          page: 1,
          page_size: 20,
          merchant_id: this.$route.query.merchant_id
        },
        time: [this.$route.query.start, this.$route.query.end],
        list: []
      }
    },
    filters:{
      tofix(val){
        return (val*100).toFixed(2)+'%'
      }
    },
    created() {
      // this.getlist()
      this.all = {
        start: this.$route.query.start, //		是	string	时间
        end: this.$route.query.end, //		是	string	时间
        channel_id: this.$route.query.channel_id, //	2	是	string	渠道id
        source: this.$route.query.merchant_name, //	pdd	是	string	来源
        sku: this.$route.query.sku, //		是	string	商品编码
        page: 1,
        page_size: 20,
        merchant_id: this.$route.query.merchant_id
      }
      this.getlist()
    },
    mounted() {


    },
    methods: {
      daochu:function(item){
        let obj = {
          start:this.$route.query.start,//		是	string	无
          end:this.$route.query.end,//		是	string	无
          channel_id:this.$route.query.channel_id,//		是	string	无
          // source:this.$route.query.merchant_name,//		是	string	无
          order_page_id:item.order_page_id,//		是	string	逗号分隔
          // sources:'',//		是	array	数组
          product_id:'',//		是	string	无
          type:2,//		是	string	0我发展1我生产2我分销
          merchant_id: this.$route.query.merchant_id,
          page_ids:item.page_id
        }
        axios.post('/api/form/data/export', obj)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$confirm('已提交导出，是否跳转到下载页面?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                        this.$router.push('/order_export2')
                      })
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      search: function() {
        this.all.page = 1
        this.getlist()
      },
      //翻页
      fanye: function(page) {
        this.page = page
        this.getlist()
      },
      //获取列表
      getlist: function() {
        this.loading = true
        axios.get('/api/form/data/merchant/page', {params:this.all})
        // axios.get('/api/form/data/source/page')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data
              // this.total = response.data.data.total
              this.loading = false
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
    },
  }
</script>

<style scoped lang="scss">
  .baoxiaoall {
    background: #f2f2f2;
    min-height: 100vh;
    .el-form-item{ margin-bottom: 0;}
    .flex {
      display: flex;
      flex-wrap: wrap;
    }

    .flexb {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .flexc {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .flexbc {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }

    .flexcc {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
    }
  }
</style>
